// 根据数据渲染文章列表
// 难点：下拉重新加载更多数据
<template>
  <div class="Comment-content" v-if="data.rows">
    <!-- 
      1- list 评论数据
      2- title 主标题
      3- subtitle 副标题
      4- isLoading 是否加载完毕
      5- submit 提交数据事件
     -->
    <MessageArea
      :list="data.rows"
      title="评论列表"
      :subtitle="`(${data.total})`"
      :isLoading="isLoading"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import featchData from "@/mixins/fetchData.js";
import MessageArea from "@/components/MessageArea";
import { getComment, pushComment } from "@/api/blog.js";

export default {
  mixins: [featchData({ total: 0, rows: [] })],
  data: function () {
    return {
      page: 1,
      limit: 10,
    };
  },
  created() {
    this.$bus.$on("mainScroll", this.handleScroll);
  },
  beforeDestroy() {
    this.$bus.$off("mainScroll", this.handleScroll);
  },
  methods: {
    // 加载第一页数据
    async fetchData() {
      return await getComment(this.$route.params.blogId, this.page, this.limit);
    },

    // 加载更多页的数据
    async fetchMore() {
      this.page++;
      return await getComment(this.$route.params.blogId, this.page, this.limit);
    },

    // 提交数据
    async handleSubmit(formData, callback) {
      let row = await pushComment({
        blogId: this.$route.params.blogId,
        ...formData,
      });
      this.data.rows.unshift(row);
      this.data.total++;

      // 提交成功过后，修改子组件的状态
      callback("提交成功");
    },
    async handleScroll(dom) {
      if (!this.isLoading) {
        return;
      }
      if (!dom) {
        return;
      }
      // 判断是否到了底部
      if (this.hasBottom(dom)) {
        this.isLoading = false; // 加载中的状态
        let data = await this.fetchMore(); // 加载更多数据
        this.data.total = data.total; // 重新设置 total
        this.data.rows = this.data.rows.concat(data.rows); // 凭借旧的的数据
        this.isLoading = true; // 加载完毕状态
      }
    },
    hasBottom(dom) {
      // 判断是否到了底部
      const boundary = 100;
      // 滚动高度 - 卷曲高度 - dom 高度 < 指定范围距离
      const desc = Math.abs(
        dom.scrollHeight - (dom.scrollTop + dom.clientHeight)
      );
      return desc <= boundary;
    },
    // 判读是请求完毕
    isOver() {
      return this.data.rows.length < this.data.total;
    },
  },
  components: {
    MessageArea,
  },
};
</script>

<style>
</style>